/*
 * Copyright © 2016 Cask Data, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not
 * use this file except in compliance with the License. You may obtain a copy of
 * the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations under
 * the License.
 */

@import "../../../styles/variables.scss";
@import "../DatasetDetailedView/DetailedViewStyling.scss";

.app-detailed-view {
  height: calc(100vh - (#{$height-of-footer} + #{$height-of-header}));
  background: rgba(238, 238, 238, 1);
  color: rgba(51, 51, 51, 1);
  overflow-y: auto;
  position: relative;
  height: 100%;
  display: grid;
  // Top panel, metadata section and tab content
  grid-template-rows: auto auto 1fr;

  // beating specificity
  .overview-tab {
    @media (min-width: 1701px) {
      .entity-cards {
        width: calc((100% - 20px - 10px - (6 * 10px)) / 7);
      }
    }

    @media (min-width: 1601px) and (max-width: 1700px) {
      .entity-cards {
        width: calc((100% - 20px - 10px - (5 * 10px)) / 6);
      }
    }

    @media (min-width: 1201px) and (max-width: 1600px) {
      .entity-cards {
        width: calc((100% - 20px - 10px - (4 * 10px)) / 5);
      }
    }

    @media (min-width: 993px) and (max-width: 1200px) {
      .entity-cards {
        width: calc((100% - 20px - 10px - (3 * 10px)) / 4);
      }
    }

    @media(min-width: 768px) and (max-width: 992px) {
      .entity-cards {
        width: calc((100% - 20px - 10px - (2 * 10px)) / 3);
      }
    }
  }

  .cask-resourcecenter-button {
    top: 8px;
    position: absolute;
  }

  @include overviewStyles();
  @include breadCrumbWrapper();

  > .fa.fa-spinner.fa-spin {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: gray;
  }

  .properties-container {
    height: 100%;
    padding: 15px 10px;
    overflow: auto;

    .message-section {
      padding: 0 10px;
      margin-bottom: 15px;
    }
  }
}
